<!-- 
tab组件: 
<app-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></app-tabs>
tabs支持的数据格式： ['全部', '待付款'] 或 [{name:'全部'}, {name:'待付款'}]
-->
<template>
	<view v-if="tabs && tabs.length" class="app-tabs" :class="{'tabs-fixed': fixed,'isLine' : isLine}" >
		<scroll-view scroll-x="true" >
			<view class="tabs-item">
				<view class=" tab-item" v-for="(tab, i) in tabs" :key="i" @click="tabClick(i)" >
					<view class="line" v-if="i != 0"></view>
					<view  :class="{'active': value==i}">
						<text :class="{'active': value==i}">
							{{getTabName(tab)}}
							<view class="cornerMarker" v-if="tab.count > 0">{{tab.count}}</view>
						</text>
						
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="tabs-line" :style="{left:lineLift}"></view>
	</view>
</template>

<script>
	export default {
		props: {
			tabs: Array,
			value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
				type: [String, Number],
				default () {
					return 0
				}
			},
			fixed: Boolean ,// 是否悬浮,默认false
			isLine:{
				type: Boolean,
				default: false
			},
		},
		computed: {
			lineLift() {
				return 100 / this.tabs.length * (this.value + 1) - 100 / (this.tabs.length * 2) + '%'
			}
		},
		methods: {
			getTabName(tab) {
				return typeof tab === "object" ? tab.name : tab
			},
			tabClick(i) {
				if (this.value != i) {
					this.$emit("input", i);
					this.$emit("change", i);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*悬浮*/
	.app-tabs.tabs-fixed {
		z-index: 9999;
		position: fixed;
		// top: 44px;
		left: 0;
		width: 100%;
		height: 94rpx;
		// top: var(--window-top);
		line-height: 94rpx;
		// padding: 0 85rpx;

	}

	.line {
		height: 20px;
		width: 1px;
		background: #E5E5E5;
		// margin: 0 80rpx;
		position: absolute;
		left: 0;
		transform: translateY(-50%);
		top: 50%;
		
		
	}
	
	.app-tabs {
		position: relative;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		background-color: #fff;

	}
	.isLine{
		border-bottom: 1rpx solid #eee;
	}
	.app-tabs .tabs-item {
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: space-between;

	}

	.app-tabs .tabs-item .tab-item {
		flex: 1;
		// min-width:160rpx;
		position: relative;
	}

	.app-tabs .tabs-item .active::after {
		// color: $base-color;
		// content: "";
		// width: 100%;
		// height: 5upx;
		// background-color: $uni-btn--bg-color;
		// position: absolute;
		// left: 0;
		// bottom: 0;
	}

	.active {
		color: $uni-btn--bg-color;
		font-weight: bold;
	}

	.app-tabs .tabs-line{
		position: absolute;
		bottom: 0px;
		width: 110rpx;
		height: 5rpx;
		transform: translateX(-50%);
		border-radius: 4rpx;
		// transition: left .3s;
		background: $uni-btn--bg-color;
	}
	.app-tabs .tabs-item .tab-item text{
		position: relative;
	}
	.cornerMarker{
		position: absolute;
		right: -30rpx;
		top:-20rpx;
		width: 38rpx;
		height: 38rpx;
		border-radius: 50%;
		background: #ff3300;
		font-size: 24rpx;
		color: #fff;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
